<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="author" content="order by dede58.com" />
		<title>老司机商城-商品详情</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		<style>
			.minus,
			.plus {
				width: 30px;
				height: 30px;
				background-color: #ff6700;
				color: white;
				outline: none;
				display: inline-block;
				line-height: 30px;
				text-align: center;
				cursor: pointer;
			}
			
			.minus~input {
				width: 30px;
				height: 24px;
			}
		</style>
		<script type="text/javascript" src="js/jquery1.9.1.js"></script>
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>

	<body onload="loadHead()">

		<!-- xiangqing -->
		<div id="goods-info">
			<div class="xiangqing">
				<div class="neirong w">
					<div class="xiaomi6 fl">{{goodsInfo.title}}</div>
					<div class="clear"></div>
				</div>
			</div>

			<div class="jieshao mt20 w">
				<div class="left fl"><img :src="imageServerPath+'/'+goodsInfo.image" style="width: 100%;height: 100%;"></div>
				<div class="right fr">
					<div class="h3 ml20 mt20">{{goodsInfo.title}}</div>
					<div class="jianjie mr40 ml20 mt10">{{goodsInfo.sellPoint}}</div>
					<div class="jiage ml20 mt10" style="font-size: 40px;">{{goodsInfo.price}}元</div>
					<div class="ft20 ml20 mt20" style="display: inline-block;">选择数量</div>
					<div class="xzbb ml20 mt10" style="display: inline-block;">
						<div class="minus" type="button" @click="minus">-</div>
						<input name="amount" type="text" v-model="count" readonly="readonly">
						<div class="plus" type="button" @click="plus">+</div>
					</div>
					<div class="ft20 ml20 mt20">小计</div>
					<div class="jiage ml20 mt10" style="font-size:30px;color:red;font-weight:bold;">{{count*goodsInfo.price}}元</div>
					<div class="xiadan ml20 mt20">
						<input class="jrgwc" type="button" name="jrgwc" value="加入购物车" @click="addToCart"/>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</body>
	<script>
		var pid = getSearchParams().pid;
		var goodsInfoVm = null;
		goodsInfoVm = new Vue({
			el: "#goods-info",
			data: {
				goodsInfo: {},
				imageServerPath: imageServerPath,
				count: 1
			},
			methods: {
				minus: function() {
					var count = goodsInfoVm.count;
					if(count != 1) {
						count--;
					}
					goodsInfoVm.count = count;
				},
				plus: function() {
					var count = goodsInfoVm.count;
					count++;
					goodsInfoVm.count = count;
				},
				//加入购物车
				addToCart:function(){
					var count=this.count;
					var pid=this.goodsInfo.id;
					$.ajax({
						url:serverPath+"cart/addToCart",
						type:"post",
						data:{
							pid:pid,
							count:count
						},
						xhrFields:{
							withCredentials: true
						},
						success:function(res){
							if(res.code==200){
								alert("加入购物车成功");
							}
						},
						error:function(res){
							alert("加入购物车失败");
						}
					});
					
					
				}
			}
		});
		$.ajax({
			type: "get",
			url: serverPath + "product/getProductById?pid=" + pid,
			xhrFields: {
				withCredentials: true
			},
			success: function(res) {
				goodsInfoVm.goodsInfo = res.data;
			}
		});
	</script>

</html>